<template>
<div class="global-footer">
    <div v-if="links.length > 0" class="global-footer__links">
        <a v-for="(i,index) of links" :key="index" class="global-footer__links-item" @click="to(i)">{{i.title}}</a>
        <!--
        <a v-for="(i,index) of items" :key="index" class="global-footer__links-item" @click="to(i)">
            -->
        <!--
    <ng-container *ngTemplateOutlet="i.host"></ng-container>
    
        </a>
        -->
    </div>
    <div class="global-footer__copyright">
        <slot></slot>
        <!--
        <ng-content></ng-content>
        -->
    </div>
</div>
</template>

<script lang="tsx">
import {
    Component,
    Prop,
    Vue,
    Emit,
} from 'vue-property-decorator';
import * as _ from 'lodash';

@Component({})
export default class GlobalFooter extends Vue {

    @Prop({
        type: Array,
        default: () => {
            return [];
        },
    })
    private links!: any[];

    private to(item: any) {
        if (!item.href) {
            return;
        }
        if (item.blankTarget) {
            ( window as any ).open(item.href);
            return;
        }
        if (/^https?:\/\//.test(item.href)) {
            ( window as any ).location.href = item.href;
        } else {
            this.$router.push(item.href);
        }
    }
}
</script>

<style lang="less">
@import '../../assets/theme/styles/index.less';

@global-footer-prefix: ~'.global-footer';

@{global-footer-prefix} {
    display: block;
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;

    &__links {
        margin-bottom: 8px;

        &-item {
            display: inline-block;
            color: @text-color-secondary;
            transition: all 0.3s;

            &:not(:last-child) {
                margin-right: 40px;
            }

            &:hover {
                color: @text-color;
            }
        }
    }

    &__copyright {
        color: @text-color-secondary;
        font-size: @font-size-base;
    }
}
</style>
